<template>
<div class="comp-cancelproduct">
    <mu-paper class="comp-list-wrap">
        <mu-list textline="three-line" style="padding: 0" v-for="item in data" :key="item.id">
            <mu-list-item avatar :ripple="false" button>
                <mu-list-item-content>
                    <!-- 内部内容显示 -->
                    <mu-list-item-sub-title class="tips" style="color: rgba(0, 0, 0, .87)">
                        <div>
                            <span>{{item.yqsyl}}</span>
                            <span>{{item.yqsyl && '预期年化率'}}</span>
                        </div>
                        <div>
                            <span>{{item.tzqx}}</span>
                            <span>{{item.tzqx && '投资期限'}}</span>
                        </div>
                        <div>
                            <span>{{item.qtje_title}}</span>
                            <span>{{item.qtje_title && '起头金额'}}</span>
                        </div>
                    </mu-list-item-sub-title>
                </mu-list-item-content>
                <mu-list-item-action>
                    <mu-list-item-after-text>
                         <mu-flex justify-content="center" align-items="center">
                            <mu-button small color="#009688" :full-width="true" v-if="!item.hasBooked" @click="orderSelect(item)">预约理财师</mu-button>
                            <div class="cancel" v-else>
                                <mu-icon value="schedule" color="red"></mu-icon>
                                <p style="color: red;">进行中</p>
                                <mu-button class="cancel-btn" small color="#fff" textColor="#212121" :full-width="true" @click="orderCancel(item)">取消预约</mu-button>
                                <div class="span_text">
                                    <span class="span_1">推广返利</span>
                                    <span class="span_2">认证可见</span>
                                </div>
                            </div>
                        </mu-flex>
                    </mu-list-item-after-text>
                </mu-list-item-action>
            </mu-list-item>
            <mu-divider></mu-divider>
        </mu-list>
    </mu-paper>
</div>
</template>
<script lang="js">
  export default  {
    props: ['data', 'update'],
    data () {
        return {
            
        }
    },
    methods: {
        
        // 预约删除
        orderCancel(item) {
            // 获取本地存储中的phone和token
            let phone = localStorage.getItem('phone') || '';
            let token = localStorage.getItem('token') || '';
            // 弹框显示
            this.$confirm('确定您要取消预约吗？', '提示', {
                type: 'info'
            })
            // 监听点击的按钮
            .then(({ result }) => {
                // 点击了确定按钮
                if (result) {
                    // 发送请求
                    this.$http({
                        url: '/api/product/cancelBookProduct',
                        method: 'POST',
                        headers: { phone, token },
                        data: { pid: item.id }
                    })
                    // 监听数据返回
                    .then(({ data }) => {
                        // console.log(data);
                        // 返回成功
                        if (data.code === 0) {
                            // 提示信息
                            this.$toast.success(data.msg);
                            // 显示预约按钮
                            item.hasBooked = false;
                            // 
                            this.update(item.id);
                        } else {
                            // 弹框显示
                            this.$confirm(data.msg, '提示', {
                                type: 'warning'
                            })
                            // 监听点击的按钮
                            .then(({ result }) => {
                                // 点击了确定按钮
                                if (result) {
                                    // 跳转到登录页
                                    this.$router.push('/login');
                                } else {
                                    // this.$toast.message('点击了取消');
                                    console.log('用户点击了取消按钮')
                                }
                            });
                        }
                    });
                } else {
                    console.log('用户点击了取消按钮')
                }
            });
        },
        // 弹框点击的方法
         confirm () {
            // 弹框显示
            this.$confirm('预约成功，请保持电话畅通，我们会尽快安排投资经理联系您。', '提示', {
                type: 'info'
            })
            // 监听点击的按钮
            .then(({ result }) => {
                // 点击了确定按钮
                if (result) {
                    // 提示信息
                    this.$toast.success('恭喜您，预约成功！');
                } else {
                    // this.$toast.message('点击了取消');
                    console.log('用户点击了取消按钮')
                }
            });
        },
    },
    computed: {

    }
}
</script>
<style lang="scss">
.comp-cancelproduct {
    padding: 0;
    .mu-list-three-line .mu-item {
        height: 113px;
    }
	.mu-list, .mu-list > li {
        padding: 0;
        .mu-item {
            .tips {
                width: 80%;
                display: flex;
                justify-content: space-between;
                text-align: center;
                font-size: 15px;
                div {
                    span {
                        display: block;
                    }
                    span:first-child {
                        color: red;
                    }
                }
            }
        }
    }
    .mu-raised-button {
        width: 80px;
    }
    .mu-button-small {
        min-width: 80px;
        box-sizing: border-box;
        position: relative;
        top: 16px;
        left: 10px;
        .mu-button-wrapper {
            box-sizing: border-box;
            width: 80px;
            padding: 0;
            .mu-ripple-wrapper {
                width: 80px;
            }
        }
        &.cancel-btn {
            top: 2px;
            left: -8px;
            min-width: 68px;
            width: 68px;
            .mu-button-wrapper {
                width: 68px;
                .mu-ripple-wrapper {
                    width: 68px;
                }
            }
        }
    }
    .cancel {
        text-align: center;
        position: relative;
        top: 12px;
        left: 17px;
        .mu-icon {
            width: 100%;
            display: block;
        }
        .span_text {
            position: absolute;
            span {
                position: absolute;
                display: inline-block;
            }
            .span_1 {
                left: -49px;
                top: -70px;
                color: rgb(255, 235, 59);
            }
            .span_2 {
                left: -56px;
                top: -53px;
                color: #e91e63;
            }
        }
    }
}
</style>
